<template>
	<view class="card">
		<view class="info">
			<view class="name">
				YUN <text class="grade">·{{info ? info.name : '访客'}}</text>
			</view>
			<view class="notice" v-if="info">
				{{tips[info.grade] || base.welcome}}
			</view>
			<view class="notice" v-else>
				登录可批量查询身份证归属。
			</view>
		</view>
		<!-- 	<view class="btn" @click="$rui.route('/pages/user/invite/invite')" v-if="is_share">
			立即邀请
		</view> -->
		<view class="btn" @click="call" v-if="info.grade < 2">
			立即开通
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue"
	import user from "@/common/user";
	import cache from "@/util/cache";

	let info = ref({})
	let tips = ref({
		1: "您每日可免费查5次，不限次数请升级。",
		2: "您可批量查询二次，设置易途账号即可。",
		3: "您已经无敌了，可使用所以功能。",
	})

	let base = ref({})

	onMounted(() => {
		info.value = user.getUser()
		base.value = cache.get('BaseData');
	})

	const call = () => {
		uni.makePhoneCall({
			phoneNumber: base.phone
		})
	}
</script>

<style lang="scss" scoped>
	.card {
		background-image: linear-gradient(-45deg, #333, #666);
		padding: 30rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;
		position: relative;

		&::after {
			content: "";
			height: 200rpx;
			width: 200rpx;
			background: #666;
			transform: rotate(45deg);
			border-radius: 10rpx;
			top: -130rpx;
			left: 0;
			position: absolute;
		}

		&::before {
			content: "";
			height: 150rpx;
			width: 150rpx;
			background-image: linear-gradient(-45deg, #666, #777);
			transform: rotate(45deg);
			border-radius: 10rpx;
			top: -95rpx;
			left: 25rpx;
			position: absolute;
			z-index: 1;
		}

		.btn {
			background-image: linear-gradient(-35deg, #ffa500, #fff8a3);
			color: #945f00;
			border-radius: 50rpx;
			font-size: 24rpx;
			padding: 12rpx 30rpx;
		}

		.info {
			position: relative;
			z-index: 9;
		}

		.notice {
			font-size: 22rpx;
			color: rgba(255, 255, 255, .7);
			margin-top: 10rpx;
		}

		.grade {
			font-size: 28rpx;
			font-weight: normal;
		}

		.name {
			background: linear-gradient(to right, #ffe2e2, #ffa500, #ffa500, #ffe2e2, #ffa500, #ffa500);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-size: 40rpx;
			font-weight: bold;

			// &::after {
			// 	content: "·Pro会员";
			// 	font-size: 28rpx;
			// 	font-weight: normal;
			// }
		}
	}
</style>